<template>
    <div class="emoji-content">
            <div class="emoji-wrapper">
                <div class="emoji-item" v-for="(emoji, index) in emojiList" :key="index" @click="sendEmoji(emoji)">
                    {{ emoji }}
                </div>
            </div>
    </div>
</template>



<script setup lang="ts">
import { defineEmits } from 'vue';
import emojiData from '@/assets/emoji/emoji';

// import smiling from '@/assets/emoji/slightly-smiling-face.png'

// 其他图片的导入语句
const emojiList = emojiData;



const emit = defineEmits(['addEmoji']);

const sendEmoji = (item: string) => {
    const emoji = item;
    console.log(emoji)
    emit('addEmoji', emoji);
};

</script>

<style>
.emoji-content {
  height: 100%; /* 设置最大高度，根据需要调整 */
  width: 100%;
  overflow-y: auto;
  overflow: hidden;
}

.emoji-wrapper {
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100%;
}

.emoji-list {
  display: flex;
  flex-wrap: wrap;
  padding: 8px; /* 调整间距 */
}

.emoji-item {
  margin: 4px; /* 调整间距 */
}
</style>
